<template>
	<view class="u-flex u-row-between u-flex-wrap" style="align-items: flex-start;">
		<view class="u-card-box u-m-b-20 width48" v-for="item in giftList" :key="item.id" @click="goGiftDetail(item.id)">
			<u-image width="100%" height="220rpx" mode="aspectFill" border-radius="20" :src="item.images[0]"></u-image>
			<!-- <view class="u-m-t-10 u-font-28 u-text-line-15 u-color-red">礼包编号：{{item.identifier}}</view> -->
			<view class="u-m-t-10">{{item.title}}</view>
			<view class="u-m-t-10 u-flex">
				<u-icon name="eye-fill" color="#888B9C" size="34"></u-icon>
				<view class="u-font-26 u-m-l-10 u-color-gray">{{item.view_number}}</view>
			</view>	
		</view>
	</view>
	
	<!-- <view>
		<view class="u-card-box u-m-b-20" v-for="item in giftList" :key="item.id" @click="goGiftDetail(item.id)">
			<view class="u-flex u-col-top">
				<view class="u-m-r-20" v-if="item.images[0]">
					<u-image width="240rpx" height="140rpx" border-radius="10" :src="item.images[0]"></u-image>
				</view>
				<view class="u-font-30 u-font-bold u-text-line-15">{{item.title}}</view>
			</view>
			<view class="u-flex u-row-between u-m-t-20">
				<view class="u-flex">
					<u-icon name="clock-fill" color="#888B9C" size="34"></u-icon>
					<view class="u-font-26 u-m-l-10 u-color-gray">{{item.create_time}}</view>
				</view>
				<view class="u-flex">
					<u-icon name="eye-fill" color="#888B9C" size="34"></u-icon>
					<view class="u-font-26 u-m-l-10 u-color-gray">浏览量：{{item.view_number}}</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	export default {
		props: ['list'],
		data() {
			return {
				giftList: []
			}
		},
		watch: {
			list: {
				handler(newValue, oldValue) {
					this.giftList = newValue
				},
				deep: true
			}
		},
		methods:{
			goGiftDetail(id){
				this.$emit("goGiftDetail",id)
			}
		}
	}
</script>

<style scoped>
	.width48{
		width: 48%;
	}
</style>